<template>
    <div class="detail_container">
      <div class="head_title" v-if="!detailForm.id">创建一企一档</div>
      <div class="head_title" v-else-if="detailForm.id && isEdit">编辑一企一档</div>
      <div class="head_title" v-else-if="detailForm.id && !isEdit">查看一企一档</div>
      <el-divider></el-divider>
      <div class="px-20">
        <el-form :model="params" :disabled="detailForm.id && !isEdit" ref="expertForm" label-width="75px" :rules="rules" label-position="left" size="small">
  
  
          <el-row :gutter="15">
            <el-col :lg="8" :xl="6">
              <el-form-item label="企业名称" prop="enterpriseName">
                <el-input v-model="params.enterpriseName" placeholder="请输入企业名称" />
              </el-form-item>
            </el-col>
  
  
  
            <el-col :lg="8" :xl="6">
              <el-form-item label="信用代码" prop="creditCode">
                <el-input v-model="params.creditCode" placeholder="请输入信用代码" />
              </el-form-item>
            </el-col>
  
            <el-col :lg="8" :xl="6">
              <el-form-item label="类型" prop="type">
                <el-select v-model="params.typeList" multiple placeholder="请选择类型" style="width: 100%;" >
                  <el-option
                    v-for="dict in dict.type.enterprise_info_type"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
  
            <el-col :lg="8" :xl="6">
              <el-form-item label="类别" prop="category">
                <el-select v-model="params.category" placeholder="请选择类别" style="width: 100%;" >
                  <el-option
                    v-for="dict in dict.type.enterprise_category"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
  
          <el-row :gutter="15">
            <el-col :lg="8" :xl="6">
              <el-form-item label="镇/街道" prop="town" label-width="80px">
                <el-tree
                  :data="treeCityCode"
                  node-key="id"
                  :props="defaultProps"
                  @node-click="handleNodeClick"
                  ref="tree">
                </el-tree>
                <!--<el-select v-model="params.town">
                  <el-option :value="optionValue">
                    &lt;!&ndash;:data 初始化获取的数据&ndash;&gt;
                    &lt;!&ndash;lazy 表示节点是否懒加载，即是否是节点展开时才去异步加载数据&ndash;&gt;
                    &lt;!&ndash;@node-click 当节点被点击时触发handleNodeClick方法&ndash;&gt;
                    &lt;!&ndash;:load 当节点需要加载子节点时触发loadNode方法&ndash;&gt;
                    <el-tree
                      :data="treeCityCode"
                      node-key="id"
                      :props="defaultProps"
                      @node-click="handleNodeClick"
                      ref="tree">
                    </el-tree>
                  </el-option>
                </el-select>-->
              </el-form-item>
  
  
            </el-col>
  
            <el-col :lg="8" :xl="6">
              <el-form-item label="详细地址" prop="addr">
                <el-input v-model="params.addr" placeholder="请输入详细地址" />
              </el-form-item>
            </el-col>
          </el-row>
  
  
  
          <el-row :gutter="15">
  
  
            <el-col :lg="8" :xl="6">
              <el-form-item label="法人代表" prop="legalPerson">
                <el-input v-model="params.legalPerson" placeholder="请输入法人代表" />
                <!--<el-select v-model="params.legalPerson" placeholder="请选择法人代表">
                  <el-option
                    v-for="item in userList"
                    :key="item.userId"
                    :label="item.userName"
                    :value="item.userId">
                  </el-option>
                </el-select>-->
              </el-form-item>
            </el-col>
  
            <el-col :lg="8" :xl="6">
              <el-form-item label="联系电话" prop="contactNumber">
                <el-input v-model="params.contactNumber" placeholder="请输入联系电话" />
              </el-form-item>
            </el-col>
  
            <el-col :lg="8" :xl="6">
              <el-form-item label="营业执照" prop="businessLicense">
                <el-input v-model="params.businessLicense" placeholder="请输入营业执照" />
              </el-form-item>
            </el-col>
          </el-row>
  
          <el-row :gutter="15">
            <el-col :lg="8" :xl="6">
              <el-form-item label="卫生许可证" prop="sanitaryPermit" label-width="120px">
                <el-input v-model="params.sanitaryPermit" placeholder="请输入卫生许可证" />
              </el-form-item>
            </el-col>
  
  
  
            <el-col :lg="8" :xl="6">
              <el-form-item label="卫生许可证到期时间" prop="sanitaryPermitDate" label-width="150px">
                <el-date-picker
                  v-model="params.sanitaryPermitDate"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  type="datetime"
                  placeholder="选择日期时间">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
  
  
  
          <el-row :gutter="15">
            <el-col :lg="8" :xl="6">
              <el-form-item label="健康证状态" prop="healthCertificateStatus" label-width="100px" >
                <el-radio-group v-model="params.healthCertificateStatus">
                  <el-radio
                    v-for="dict in dict.type.health_certificate_status"
                    :key="dict.value"
                    :label="dict.value"
                  >{{dict.label}}</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
  
            <el-col :lg="8" :xl="6">
              <el-form-item label="工商档案状态" prop="archivesStatus" label-width="100px">
                <el-radio-group v-model="params.archivesStatus">
                  <el-radio
                    v-for="dict in dict.type.business_file_status"
                    :key="dict.value"
                    :label="dict.value"
                  >{{dict.label}}</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
  
        </el-form>
      </div>
      <div class="flex p-20">
        <el-button @click="sureForm('expertForm')" type="primary" v-if="!detailForm.id || isEdit">确认提交</el-button>
        <el-button @click="isEdit = true" type="primary" v-if="detailForm.id && !isEdit">编辑</el-button>
        <el-button @click="show = false">返回</el-button>
      </div>
    </div>
  </template>
  
  <script>
  
    import { getTreeCityCode } from "@/api/zhangping/zpEnterpriseInfo";
    export default{
      dicts: ['enterprise_info_type', 'health_certificate_status', 'business_file_status', 'enterprise_category'],
      data () {
        return {
          params:{
              id: null,
              enterpriseName: null,
              creditCode: null,
              type: null,
              typeList: [],
              category: null,
              town: null,
              townCode: null,
              addr: null,
              legalPerson: '',
              contactNumber: null,
              businessLicense: null,
              sanitaryPermit: null,
              sanitaryPermitDate: null,
              healthCertificateStatus: null,
              archivesStatus: null,
              lastUpdateTime: null,
              userId: null,
              createId: null,
              createBy: null,
              createTime: null,
              updateId: null,
              updateBy: null,
              updateTime: null,
              delFlag: null
          },
          treeCityCode: [],
          defaultProps: {
            children: 'children',
            label: 'mname'
          },
          mname: '漳平',
          optionValue: '',
          rules: {},
        }
      },
      props: {
        editVisible: {
          type: Boolean,
          default: () => {
            return false
          }
        },
        detailForm: {
          type: Object,
          default: () => {
            return {}
          }
        },
        isEdit:{
          type:Boolean,
          default:()=>{
            return false
          }
        },
      },
      watch:{
  
      },
      computed: {
        show: {
          get () {
            return this.editVisible
          },
          set (val) {
            this.$emit('update:editVisible', val)
          }
        },
      },
      created () {
        if(this.detailForm.id){
          this.params = {...this.detailForm}
        }
        this.getTreeCityCode()
        this.getUserList()
      },
      methods: {
        // 确认
        sureForm(formName) {
          console.log('formName', formName)
          this.$refs [formName].validate((valid) => {
            console.log('detailForm', this.detailForm)
            if (valid) {
              if(this.detailForm.id){
                this.$emit('submitForm', this.params,this.detailForm.id)
              }else{
                this.$emit('submitForm', this.params)
              }
            } else {
              console.log('error submit!!');
              return false;
            }
          });
  
        },
  
        /** 查询一企一档列表 */
        async getTreeCityCode() {
          getTreeCityCode({mname: this.mname}).then(response => {
            this.treeCityCode = response.data;
          });
        },
  
        handleNodeClick(data) {
          console.log("111111111",data);
          this.params.town = data.id
          this.optionValue = data.mname
          this.params.townCode = data.numbers
        }
      }
  
    }
  </script>
  
  <style scoped="scoped" lang="scss">
    .titile_txt{
      font-family: Source Han Sans SC, Source Han Sans SC;
      font-weight: bold;
      font-size: 16px;
      color: #333333;
      line-height: 19px;
      margin-bottom: 15px;
    }
  </style>
  